<template>
  <div class="visual-report">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="雷达图" name="radar">
        <div ref="radarChartRef" class="chart-container"></div>
      </el-tab-pane>
      <el-tab-pane label="条形图" name="bar">
        <div ref="barChartRef" class="chart-container"></div>
      </el-tab-pane>
      <el-tab-pane label="风险分布" name="pie">
        <div ref="pieChartRef" class="chart-container"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { getDetectionChart } from '@/api'

const props = defineProps({
  paperId: Number
})

const activeTab = ref('radar')
const radarChartRef = ref()
const barChartRef = ref()
const pieChartRef = ref()

let radarChart = null
let barChart = null
let pieChart = null

const initCharts = async () => {
  const chartData = await getDetectionChart(props.paperId)
  
  // 初始化雷达图
  if (radarChartRef.value) {
    radarChart = echarts.init(radarChartRef.value)
    radarChart.setOption({
      radar: {
        indicator: [
          { name: 'AI概率', max: 100 },
          { name: '语义连贯性', max: 100 },
          { name: '用词多样性', max: 100 },
          { name: '句式复杂度', max: 100 }
        ]
      },
      series: [{
        type: 'radar',
        data: [{
          value: chartData.radarData,
          name: '论文指标'
        }]
      }]
    })
  }
  
  // 初始化条形图
  if (barChartRef.value) {
    barChart = echarts.init(barChartRef.value)
    barChart.setOption({
      xAxis: {
        type: 'category',
        data: chartData.paragraphNumbers
      },
      yAxis: {
        type: 'value',
        max: 100
      },
      series: [{
        data: chartData.probabilities,
        type: 'bar',
        itemStyle: {
          color: function(params) {
            const val = params.value
            if (val <= 30) return '#4caf50'
            if (val <= 60) return '#ffeb3b'
            if (val <= 90) return '#ff9800'
            return '#f44336'
          }
        }
      }]
    })
  }
  
  // 初始化饼图
  if (pieChartRef.value) {
    pieChart = echarts.init(pieChartRef.value)
    pieChart.setOption({
      series: [{
        type: 'pie',
        data: chartData.riskDistribution
      }]
    })
  }
}

onMounted(() => {
  initCharts()
})

watch(() => props.paperId, () => {
  initCharts()
})
</script>

<style scoped>
.visual-report {
  padding: 20px;
}

.chart-container {
  width: 100%;
  height: 500px;
}
</style>